<template>
	<view class="share">
		<!-- 导航栏 -->
		<nav-bars backState="1000" bgColor="transparent" fontColor="#fff" title="生成海报"></nav-bars>
		<!-- 背景 -->
		<view class="s_bg"></view>
		<!-- 内容 -->
		<view class="s_content">
			<view class="s_cPicture">
				<view class="s_cImage"><image :src="img || 'https://cos.ryz1620.com/liankun/static/IMG279.png'"></image></view>
				<view class="s_cUser">
					<view class="s_cHead"><image :src="avatar || 'https://cos.ryz1620.com/liankun/static/IMG280.png'"></image></view>
					<view class="s_cName">{{ userInfo.username || '***' }}</view>
				</view>
				<view class="s_cTags">
					<view class="s_ctTag">
						<view class="s_ctIcon"><image src="/static/common/icon_topic.png"></image></view>
						<text>{{ datas.title }}</text>
					</view>
				</view>
				<!-- <view class="s_cText1 omit-1">{{ datas.title }}</view> -->
				<view class="s_cBtm">
					<view class="s_cCode"><image :src="datas.wx_code_url"></image></view>
					<view class="s_cTip">
						<view>长按小程序码</view>
						<view>查看Ta的分享</view>
					</view>
					<view class="s_cLogo">融易装</view>
				</view>
			</view>
			<view class="s_cFuns">
				<view class="s_cfClose" @tap="goBack">
					<view class="s_cfBtn"><view class="s_cfIcon iconfont icon-cancel2"></view></view>
					<view class="s_cfTxt">取消</view>
				</view>
				<view class="s_cfSave" @tap="download">
					<view class="s_cfBtn"><view class="s_cfIcon iconfont icon-save"></view></view>
					<view class="s_cfTxt">保存到相册</view>
				</view>
			</view>
		</view>

		<!-- canvas -->
		<view class="s_canvas">
			<view class="s_cCan"><canvas canvas-id="myPoster" :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"></canvas></view>
		</view>
	</view>
</template>

<script>
// import service_design from '@/service/design';
import service_mall from '@/service/mall.js'
export default {
	data() {
		return {
			systemInfo: null,
			// canvas
			canvasCtx: null,
			canvasWidth: 640,
			canvasHeight: 888,
			trend_id: '',
			datas: {},
			img: '',
			titimg: 'https://cos.ryz1620.com/liankun/static/IMG8650.png',
			avatar: '',
			userInfo: {},
			information_id:''
		};
	},

	onLoad(params) {
		this.$utils.getUrl()
		this.information_id = params.information_id;
		this.getshare();
	},
	onReady() {
		let _this = this;

		if (!_this.canvasCtx) _this.canvasCtx = uni.createCanvasContext('myPoster');
		if (!_this.systemInfo) {
			uni.getSystemInfo({
				success(res) {
					_this.systemInfo = res;
				}
			});
		}
	},

	methods: {
		// getForward() {
		// 	service_design
		// 		.gettrends({
		// 			trend_id: this.trend_id
		// 		})
		// 		.then(res => {
		// 			if (res.code == 1) {
		// 				var forward_id = res.data.forward_id;
		// 			}
		// 		});
		// },
		// 分享
		getshare() {
			let that = this;
			service_mall.toInformationShare({
					information_id: this.information_id
				})
				.then(res => {
					if (res.code == 1) {
						this.datas = res.data;
						this.avatar = res.data.user_id.avatar.path;
						this.userInfo = res.data.user_id;
						// console.log(res.data, 'asdasdasd');
						if (res.data.type == 1) {
							console.log(123);

							this.img = res.data.media[0].cover;
						} else {
							console.log(456);
							if (res.data.media.length > 0) {
								console.log(78);
								this.img = res.data.media[0].path;
							} else {
								console.log(99);
								this.img = res.data.media.path;
							}
						}
					}
				});
		},
		// 返回
		goBack() {
			uni.navigateBack();
		},

		// 下载
		download() {
			let _this = this;
			// #ifdef MP-WEIXIN
			uni.getSetting({
				success(res) {
					// 没有权限 => 获取权限
					if (!res.authSetting['scope.writePhotosAlbum']) {
						uni.authorize({
							scope: 'scope.writePhotosAlbum',
							success() {
								_this.createPicture();
							},
							fail() {
								uni.showModal({
									title: '提示：',
									content: '授权失败，请前往设置中心设置权限',
									confirmText: '前往授权',
									success(res) {
										if (res.confirm) {
											uni.openSetting();
										} else {
											uni.showToast({
												title: '保存失败，没有权限!',
												icon: 'none'
											});
										}
									}
								});
							}
						});
					} else {
						_this.createPicture();
					}
				}
			});
			// #endif

			// #ifdef APP-PLUS
			_this.createPicture();
			//#endif
		},

		// 生成分享海报
		createPicture() {
			let _this = this;
			uni.showLoading({
				title: '海报绘制中...',
				mask: true
			});
			_this.drawCanvas(() => {
				if (!_this.systemInfo) _this.systemInfo = uni.getSystemInfoSync();
				let pixelRatio = _this.systemInfo ? _this.systemInfo.pixelRatio : 2;
				// 生成图片
				uni.canvasToTempFilePath({
					canvasId: 'myPoster',
					width: _this.canvasWidth,
					height: _this.canvasHeight,
					destWidth: _this.canvasWidth * pixelRatio,
					destHeight: _this.canvasHeight * pixelRatio,
					success(res) {
						let tempFilePath = res.tempFilePath;
						// 保存图片到相册
						uni.saveImageToPhotosAlbum({
							filePath: tempFilePath,
							success() {
								uni.hideLoading();
								uni.showToast({
									title: '海报生成成功，图片已放入您的相册',
									icon: 'none'
								});
							}
						});
					}
				});
			});
		},
		//获取图片
		getImageInfo(imgSrc) {
			return new Promise((resolve, reject) => {
				uni.getImageInfo({
					src: imgSrc,
					success: image => {
						resolve(image);
						console.log('获取图片成功', image);
					},
					fail: err => {
						reject(err);
						console.log('获取图片失败', err);
					}
				});
			});
		},

		// 绘制canvas
		async drawCanvas(callback) {
			let that = this;
			let ctx = that.canvasCtx ? that.canvasCtx : uni.createCanvasContext('myPoster');
			if (!that.canvasCtx) that.canvasCtx = ctx;

			let ctxWidth = that.canvasWidth;
			let ctxHeight = that.canvasHeight;

			// 清空canvas内容=====
			ctx.clearRect(0, 0, ctxWidth, ctxHeight);

			// 绘制最外层盒子=====
			let boxW = ctxWidth;
			let boxH = ctxHeight;
			let boxRadius = 16;
			let boxBack = '#fff';
			let boxX = 0;
			let boxY = 0;
			let boxLeft = 0;
			let boxTop = 0;
			ctx.save();
			ctx.rect(boxX, boxY, boxW, boxH);
			ctx.setFillStyle(boxBack);
			ctx.fill();
			ctx.restore();
			ctx.draw(true);

			// 绘制大图=====
			let b_imageMl = 28;
			let b_imageMt = 28;
			let b_imageX = boxLeft + b_imageMl;
			let b_imageY = boxTop + b_imageMt;
			let b_imageW = 584;
			let b_imageH = 484;
			let b_imageRadius = 16;
			let b_imageBg = '#f0f0f0';
			let b_imageSrc = await that.getImageInfo(that.img || 'https://cos.ryz1620.com/liankun/static/IMG279.png');
			ctx.save();
			that.roundRect(ctx, b_imageX, b_imageY, b_imageW, b_imageH, b_imageRadius);
			ctx.clip();
			ctx.drawImage(b_imageSrc.path, b_imageX, b_imageY, b_imageW, b_imageH);
			ctx.restore();
			ctx.draw(true);
			// 重新计算盒子top信息
			boxTop = b_imageY + b_imageH;

			// 用户信息=====
			// 绘制用户头像容器
			let b_headMl = 28;
			let b_headMt = -40;
			let b_headW = 80;
			let b_headH = 80;
			let b_headX = boxLeft + b_headMl;
			let b_headY = boxTop + b_headMt;
			let b_headRadius = 40;
			let b_headBg = '#fff';
			let b_headIsPosition = true;
			ctx.save();
			ctx.arc(b_headX + b_headRadius, b_headY + b_headRadius, b_headRadius, 0, 2 * Math.PI);
			ctx.setFillStyle(b_headBg);
			ctx.fill();
			ctx.restore();
			ctx.draw(true);
			// 绘制用户头像
			let b_headimgMl = 32;
			let b_headimgMt = -36;
			let b_headimgW = 72;
			let b_headimgH = 72;
			let b_headimgX = boxLeft + b_headimgMl;
			let b_headimgY = boxTop + b_headimgMt;
			let b_headimgRadius = 36;
			let b_headimgBg = '#f0f0f0';
			let b_headimgSrc = await that.getImageInfo(that.datas.user_id.avatar.path || 'https://cos.ryz1620.com/liankun/static/IMG280.png');
			let b_headimgIsPosition = true;
			ctx.save();
			ctx.arc(b_headimgX + b_headimgRadius, b_headimgY + b_headimgRadius, b_headimgRadius, 0, 2 * Math.PI);
			ctx.setFillStyle(b_headimgBg);
			ctx.fill();
			ctx.clip();
			ctx.drawImage(b_headimgSrc.path, b_headimgX, b_headimgY, b_headimgW, b_headimgH);
			ctx.restore();
			ctx.draw(true);
			// 绘制用户名
			let b_nameText = that.datas.user_id.username || '***';
			let b_nameFontSize = 24;
			let b_nameFont = 'bold ' + b_nameFontSize + 'px sans-serif';
			let b_nameMt = 6;
			let b_nameMl = 124;
			let b_nameLh = 34;
			let b_nameX = boxLeft + b_nameMl;
			let b_nameY = boxTop + b_nameMt;
			ctx.save();
			ctx.font = b_nameFont;
			ctx.setFillStyle('#333');
			ctx.setFontSize(b_nameFontSize);
			ctx.setTextBaseline('top');
			ctx.fillText(b_nameText, b_nameX, b_nameY + (b_nameLh - b_nameFontSize) / 2);
			ctx.restore();
			ctx.draw(true);
			// 重新计算盒子top信息
			boxTop = b_nameY + b_nameLh;

			// 标签=====
			let b_tagText = that.datas.title;
			let b_tagFontSize = 24;
			let b_tagTextAllowW = 512; // 文字允许的长度
			let b_tagW = 64; // 左边距48px，右边距16px
			let b_tagH = 44;
			let b_tagLh = 44;
			let b_tagRadius = 22;
			let b_tagPl = 48;
			let b_tagMt = 28;
			let b_tagMl = 28;
			let b_tagX = boxLeft + b_tagMl;
			let b_tagY = boxTop + b_tagMt;
			let b_tagBg = '#f9f6f3';
			let b_tagIconX = 4;
			let b_tagIconY = 4;
			let b_tagIconW = 36;
			let b_tagIconH = 36;
			let b_tagIconIsPosition = true;
			// 获取文字宽度
			ctx.save();
			ctx.setFontSize(b_tagFontSize);
			let b_tagTextW = ctx.measureText(b_tagText).width;
			if (b_tagTextW > b_tagTextAllowW) {
				b_tagW += b_tagTextAllowW;
				b_tagTextW = b_tagTextAllowW;
			} else {
				b_tagW += b_tagTextW;
			}
			ctx.restore();
			// 绘制标签背景
			ctx.save();
			that.roundRect(ctx, b_tagX, b_tagY, b_tagW, b_tagH, b_tagRadius);
			ctx.setFillStyle(b_tagBg);
			ctx.fill();
			ctx.restore();
			ctx.draw(true);
			// 绘制文字
			ctx.save();
			ctx.setFillStyle('#a58f6d');
			ctx.setTextBaseline('top');
			that.dealWords({
				ctx,
				fontSize: b_tagFontSize,
				word: b_tagText,
				maxWidth: b_tagTextW,
				x: b_tagX + b_tagPl,
				y: b_tagY + (b_tagLh - b_tagFontSize) / 2
			});
			ctx.restore();
			ctx.draw(true);
			// 绘制icon
			let titimg = await that.getImageInfo(that.titimg);
			ctx.save();
			ctx.drawImage(titimg.path, b_tagX + b_tagIconX, b_tagY + b_tagIconY, b_tagIconW, b_tagIconH);
			ctx.restore();
			ctx.draw(true);
			// 重新计算盒子top信息
			boxTop = b_tagY + b_tagH;

			// 内容=====
			let b_contText = that.datas.content;
			let b_contFontSize = 24;
			let b_contMt = 16;
			let b_contMl = 32;
			let b_contWidth = 576;
			let b_contLh = 32;
			let b_contX = boxLeft + b_contMl;
			let b_contY = boxTop + b_contMt;
			ctx.save();
			ctx.setFillStyle('#6c6c6c');
			ctx.setTextBaseline('top');
			that.dealWords({
				ctx,
				fontSize: b_contFontSize,
				word: b_contText,
				maxWidth: b_contWidth,
				x: b_contX,
				y: b_contY + (b_contLh - b_contFontSize) / 2
			});
			ctx.restore();
			ctx.draw(true);
			// 重新计算盒子top信息
			boxTop = b_contY + b_contLh;

			// 分割线=====
			let b_lineMt = 40;
			let b_lineX = boxLeft;
			let b_lineY = boxTop + b_lineMt;
			let b_lineBg = '#f4f4f4';
			ctx.save();
			ctx.rect(b_lineX, b_lineY, boxW, 1);
			ctx.setFillStyle(b_lineBg);
			ctx.fill();
			ctx.restore();
			ctx.draw(true);
			// 重新计算盒子top信息
			boxTop = b_lineY;

			// logo=====
			let b_logoText = '融易装';
			let b_logoMt = 60;
			let b_logoMl = 32;
			let b_logoLh = 56;
			let b_logoFontSize = 40;
			let b_logoFont = 'bold ' + b_logoFontSize + 'px sans-serif';
			let b_logoX = boxLeft + b_logoMl;
			let b_logoY = boxTop + b_logoMt;
			let b_logoIsPosition = true;
			ctx.save();
			ctx.font = b_logoFont;
			ctx.setFontSize(b_logoFontSize);
			ctx.setFillStyle('#333');
			ctx.setTextBaseline('top');
			ctx.fillText(b_logoText, b_logoX, b_logoY + (b_logoLh - b_logoFontSize) / 2);
			ctx.restore();
			ctx.draw(true);

			// 提示=====
			let b_tipText1 = '长按小程序码';
			let b_tipText2 = '查看Ta的分享';
			let b_tipMt = 54;
			let b_tipMl = 320;
			let b_tipLh = 36;
			let b_tipFontSize = 24;
			let b_tipX = boxLeft + b_tipMl;
			let b_tipY = boxTop + b_tipMt;
			let b_tipIsPosition = true;
			ctx.save();
			ctx.setFontSize(b_tipFontSize);
			ctx.setFillStyle('#939393');
			ctx.setTextBaseline('top');
			ctx.fillText(b_tipText1, b_tipX, b_tipY + (b_tipLh - b_tipFontSize) / 2);
			ctx.fillText(b_tipText2, b_tipX, b_tipY + b_tipLh + (b_tipLh - b_tipFontSize) / 2);
			ctx.restore();
			ctx.draw(true);

			// 小程序码=====
			let b_codeMl = 492;
			let b_codeMt = 28;
			let b_codeX = boxLeft + b_codeMl;
			let b_codeY = boxTop + b_codeMt;
			let b_codeW = 120;
			let b_codeH = 120;
			let b_codeBg = '#f0f0f0';
			let b_codeSrc = await that.getImageInfo(that.datas.wx_code_url);
			ctx.save();
			ctx.rect(b_codeX, b_codeY, b_codeW, b_codeH);
			ctx.clip();
			ctx.drawImage(b_codeSrc.path, b_codeX, b_codeY, b_codeW, b_codeH);
			ctx.restore();
			ctx.draw(true, () => {
				if (typeof callback === 'function') {
					setTimeout(() => {
						callback();
					}, 100);
				}
			});
		},

		// 圆角矩形
		roundRect(ctx, x, y, w, h, r) {
			let min_size = Math.min(w, h);
			if (r > min_size / 2) r = min_size / 2;
			ctx.beginPath();
			ctx.moveTo(x + r, y);
			ctx.arcTo(x + w, y, x + w, y + h, r);
			ctx.arcTo(x + w, y + h, x, y + h, r);
			ctx.arcTo(x, y + h, x, y, r);
			ctx.arcTo(x, y, x + w, y, r);
			ctx.closePath();
		},

		//处理文字多出省略号显示
		dealWords({ ctx, fontSize, line, word, maxWidth, x, y, maxLine = 1 } = {}) {
			line = line ? line : fontSize;
			ctx.setFontSize(fontSize); // 设置字体大小
			let allRow = Math.ceil(ctx.measureText(word).width / maxWidth); // 实际总共能分多少行
			let count = allRow >= maxLine ? maxLine : allRow; // 实际能分多少行与设置的最大显示行数比，谁小就用谁做循环次数
			let endPos = 0; // 当前字符串的截断点
			for (let j = 0; j < count; j++) {
				let nowStr = word.slice(endPos); // 当前剩余的字符串
				let rowWid = 0; // 每一行当前宽度
				if (ctx.measureText(nowStr).width > maxWidth) {
					// 如果当前的字符串宽度大于最大宽度，然后开始截取
					for (let m = 0; m < nowStr.length; m++) {
						rowWid += ctx.measureText(nowStr[m]).width; // 当前字符串总宽度
						if (rowWid > maxWidth) {
							if (j === maxLine - 1) {
								// 如果是最后一行
								ctx.fillText(nowStr.slice(0, m - 1) + '...', x, y + j * line); // (j+1)*18这是每一行的高度
							} else {
								ctx.fillText(nowStr.slice(0, m), x, y + j * line);
							}
							endPos += m; // 下次截断点
							break;
						}
					}
				} else {
					// 如果当前的字符串宽度小于最大宽度就直接输出
					ctx.fillText(nowStr.slice(0), x, y + j * 18);
				}
			}
		}
	}
};
</script>

<style lang="scss" scoped>
// 背景=====
.share .s_bg {
	width: 100vw;
	height: 100vh;
	background: linear-gradient(180deg, #1a212d 0%, #a2a5aa 100%);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
}

// 内容=====
.share .s_content {
	padding-top: 72rpx;
	position: relative;
	z-index: 2;

	.s_cPicture {
		width: 640rpx;
		margin-left: 56rpx;
		border-radius: 16rpx;
		background: #fff;
		box-shadow: 0 0 12rpx rgba(0, 0, 0, 0.16);
		overflow: hidden;
	}

	.s_cImage {
		width: 584rpx;
		height: 484rpx;
		margin: 28rpx 0 0 28rpx;
		border-radius: 16rpx;
		background: #f0f0f0;
	}

	.s_cUser {
		height: 34rpx;
		line-height: 34rpx;
		font-size: 24rpx;
		font-weight: bold;
		padding-left: 124rpx;
		margin-top: 6rpx;
		position: relative;
	}

	.s_cHead {
		width: 80rpx;
		height: 80rpx;
		border: 4rpx solid #fff;
		border-radius: 50%;
		background: #f0f0f0;
		position: absolute;
		bottom: 0;
		left: 28rpx;
		overflow: hidden;
	}

	// 标签
	.s_cTags {
		padding: 20rpx 28rpx 0;
		overflow: hidden;
	}

	.s_ctTag {
		height: 44px;
		height: 44rpx;
		line-height: 44rpx;
		color: #a58f6d;
		font-size: 24rpx;
		padding-left: 48rpx;
		margin: 8rpx 8rpx 0 0;
		border-radius: 22rpx;
		background: #f9f6f3;
		position: relative;
		float: left;
	}

	.s_ctIcon {
		width: 36rpx;
		height: 36rpx;
		position: absolute;
		top: 4rpx;
		left: 4rpx;
	}

	// 清单
	.s_cChecklist {
		height: 96rpx;
		padding-top: 16rpx;
		margin: 16rpx 28rpx 0;
		border-radius: 8rpx;
		background: #f6f7fb;
		box-sizing: border-box;
		display: flex;
	}

	.s_ccItem {
		flex: 1;
	}

	.s_ccTit,
	.s_ccTxt {
		height: 28rpx;
		line-height: 28rpx;
		text-align: center;
		color: #939393;
		font-size: 20rpx;
	}

	.s_ccTxt {
		color: #333;
		margin-top: 8rpx;
	}

	// 设计动态
	.s_cText1 {
		height: 32rpx;
		line-height: 32rpx;
		color: #6c6c6c;
		font-size: 24rpx;
		margin: 16rpx 32rpx 0;
	}

	// 案例详情
	.s_cText2 {
		height: 32rpx;
		line-height: 32rpx;
		color: #6c6c6c;
		font-size: 24rpx;
		margin: 28rpx 32rpx 0;
	}

	.s_cBtm {
		height: 176rpx;
		margin-top: 40rpx;
		position: relative;

		&::before {
			content: '';
			width: 100%;
			height: 1px;
			background: #f4f4f4;
			position: absolute;
			top: 0;
			left: 0;
			transform: scaleY(0.5);
		}
	}

	.s_cCode {
		width: 120rpx;
		height: 120rpx;
		margin: 28rpx 28rpx 0 0;
		float: right;
	}

	.s_cTip {
		line-height: 36rpx;
		color: #939393;
		font-size: 24rpx;
		margin: 54rpx 20rpx 0 0;
		float: right;
	}

	.s_cLogo {
		height: 176rpx;
		line-height: 176rpx;
		font-size: 40rpx;
		font-weight: bold;
		padding-left: 32rpx;
	}

	.s_cFuns {
		padding: 60rpx 120rpx 30rpx;
		overflow: hidden;
	}

	.s_cfClose,
	.s_cfSave {
		padding: 20rpx;
		position: relative;
		float: left;

		&:active {
			opacity: 0.88;
		}

		.s_cfBtn {
			width: 112rpx;
			height: 112rpx;
			color: #ccc;
			border-radius: 50%;
			background: #fff;
			box-shadow: 0 0 12rpx rgba(0, 0, 0, 0.16);
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.s_cfIcon {
			font-size: 72rpx;
		}

		.s_cfTxt {
			height: 34rpx;
			line-height: 34rpx;
			text-align: center;
			color: #fff;
			font-size: 24rpx;
			margin-top: 16rpx;
		}
	}

	.s_cfSave {
		float: right;

		.s_cfBtn {
			background: #ffd425;
			color: #fff;
		}
	}
}

// canvas
.share .s_canvas {
	position: relative;
	overflow: hidden;

	.s_cCan {
		position: absolute;
		top: 10000px;
		left: 10000px;
	}
}
</style>
